<template>
    <div class="login_view flex_center">
        <div class="login_box">
            <div class="login_box_left">
                <!-- <div style="height: 160px"></div> -->
                <div class="form_box flex_center">
                    <div class="form_tab_box">
                        <div :class="'form_tab flex_center '+(login_type?'':'active')" @click="login_type=0">密码登录</div>
                        <div v-if="!is_show_sms_login" :class="'form_tab flex_center '+(login_type==1?'active':'')" @click="login_type=1">账号注册</div>
                        <div v-if="is_show_sms_login" :class="'form_tab flex_center '+(login_type==2?'active':'')" @click="login_type=2">验证码登录</div>
                    </div>

                    <template v-if="login_type == 0">
                        <div class="form_audio_box">
                            <div :class="'form_audio '+(accunt_type?'':'active')" @click="accunt_type=0">
                                <img v-if="accunt_type==0" src="../../assets/icons/checked.png" class="audio_check_icon">
                                <img v-if="accunt_type==1" src="../../assets/icons/check.png" class="audio_check_icon">
                                IM账号
                            </div>
                            <div v-if="!is_show_sms_login" :class="'form_audio '+(accunt_type?'active':'')" @click="accunt_type=1">
                                <img v-if="accunt_type==1" src="../../assets/icons/checked.png" class="audio_check_icon">
                                <img v-if="accunt_type==0" src="../../assets/icons/check.png" class="audio_check_icon">
                                业务账号
                            </div>
                        </div>
                        <div class="form_input_box">
                            <i class="el-icon-user"></i>
                            <input type="text" placeholder="请输入您的手机号或邮箱" v-model="loginName">
                        </div>
                        <div class="form_input_box">
                            <i class="el-icon-lock"></i>
                            <input :type="is_show_pwd1?'text':'password'" placeholder="请输入您的密码" v-model="loginPsw">
                            <img v-if="!is_show_pwd1" class="form_input_right_icon" src="../../assets/icons/ttubiao_hide.png" @click="is_show_pwd1=true"/>
                            <img v-if="is_show_pwd1" class="form_input_right_icon" src="../../assets/icons/ttubiao_display.png" @click="is_show_pwd1=false"/>
                        </div>
                        <div class="form_row">
                            <div style="flex: 1"></div>
                            <div class="forget_btn flex_center pointer">忘记密码</div>
                        </div>
                        <div class="form_main_btn flex_center" @click="login">登录</div>
                    </template>

                    <template v-if="login_type==1">
                        <div style="height: 20px;"></div>
                        <div class="form_input_box">
                            <i class="el-icon-mobile-phone"></i>
                            <input type="text" placeholder="请输入您的手机号" v-model="phone">
                        </div>
                        <!-- <div class="form_input_box">
                            <i class="el-icon-message"></i>
                            <input type="text" placeholder="请输入短信验证码" style="width: 116px;">
                            <div class="form_main_btn flex_center" style="width: 90px;flex: 0 0 auto;font-size:12px;" @click="getSmsCode()">{{sms_code}}</div>
                        </div> -->
                        <div v-show="!is_bind_email" class="form_input_box">
                            <i class="el-icon-user"></i>
                            <input type="text" placeholder="请您输入账号" v-model="registerName">
                        </div>
                        <div v-show="!is_bind_email" class="form_input_box">
                            <i class="el-icon-lock"></i>
                            <input :type="is_show_pwd2?'text':'password'" placeholder="请设置您的密码" v-model="registerPsw">
                            <img v-if="!is_show_pwd2" class="form_input_right_icon" src="../../assets/icons/ttubiao_hide.png" @click="is_show_pwd2=true"/>
                            <img v-if="is_show_pwd2" class="form_input_right_icon" src="../../assets/icons/ttubiao_display.png" @click="is_show_pwd2=false"/>
                        </div>
                        <div v-show="is_bind_email" class="form_input_box">
                            <i class="el-icon-user"></i>
                            <input type="text" placeholder="请输入已有邮箱账号">
                        </div>
                        <div v-show="is_bind_email" class="form_input_box">
                            <i class="el-icon-lock"></i>
                            <input :type="is_show_pwd3?'text':'password'" placeholder="请输入邮箱账号密码">
                            <img v-if="!is_show_pwd3" class="form_input_right_icon" src="../../assets/icons/ttubiao_hide.png" @click="is_show_pwd3=true"/>
                            <img v-if="is_show_pwd3" class="form_input_right_icon" src="../../assets/icons/ttubiao_display.png" @click="is_show_pwd3=false"/>
                        </div>
                        <div class="bind_email_btn"><el-checkbox v-model="is_bind_email">绑定已有邮箱账号</el-checkbox></div>
                        <div style="height: 20px;"></div>
                        <div class="form_main_btn flex_center" @click="registerBtn"> 同意协议并注册 </div>
                    </template>

                    <template v-if="login_type==2">
                        <div style="height: 20px;"></div>
                        <div class="form_input_box">
                            <i class="el-icon-mobile-phone"></i>
                            <input type="text" placeholder="请输入您的手机号">
                        </div>
                        <div class="form_input_box">
                            <i class="el-icon-message"></i>
                            <input type="text" placeholder="请输入短信验证码" style="width: 116px;">
                            <div class="form_main_btn flex_center" style="width: 90px;flex: 0 0 auto;font-size:12px;" @click="getSmsCode()">{{sms_code}}</div>
                        </div>
                        <div style="height: 20px;"></div>
                        <div class="form_main_btn flex_center"> 登录 </div>
                    </template>


                    <div v-if="!is_show_sms_login" class="code_login_btn" @click="is_show_sms_login=true;login_type=2;">验证码登录</div>
                    <div v-if="is_show_sms_login" class="code_login_btn" @click="is_show_sms_login=false;login_type=1;">账号注册</div>
                    <div class="other_login_title">
                        <div class="other_login_line"></div>
                        <div>其它方式登录</div>
                        <div class="other_login_line"></div>
                    </div>
                    <div class="other_login_box">
                        <div class="other_login_icon flex_center"><img src="../../assets/icons/icon_oschina.png"></div>
                        <div class="other_login_icon flex_center"><img src="../../assets/icons/icon_qq.png"></div>
                        <div class="other_login_icon flex_center"><img src="../../assets/icons/icon_dy.png" style="width: 38px;height: 38px;"></div>
                        <div class="other_login_icon flex_center"><img src="../../assets/icons/icon_wx.png"></div>
                    </div>
                    <div class="agreements">
                        使用即代表同意<span @click="enterService()">《用户服务协议》</span>和<span @click="enterSecret()">《隐私政策》</span>
                    </div>
                </div>
                <div style="height: 20px"></div>
            </div>
            <div class="login_box_right flex_center">
                <div class="banner_box">
                    <div class="flex_center" style="flex: 1;">
                        <el-carousel arrow="never" height="400px" style="width: 37vw;min-width: 500px;">
                            <el-carousel-item>
                                <div class="banner banner1"></div>
                            </el-carousel-item>
                            <el-carousel-item>
                                <div class="banner banner2"></div>
                            </el-carousel-item>
                            <el-carousel-item>
                                <div class="banner banner3"></div>
                            </el-carousel-item>
                            <el-carousel-item>
                                <div class="banner banner4"></div>
                            </el-carousel-item>
                            <el-carousel-item>
                                <div class="banner banner5"></div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="banner_tip"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {register,login,loginIm,getInfo} from '../../api/api'
import {Message} from 'element-ui'
export default {
    data() {
        return {
            login_type: 0,
            accunt_type: 0,
            sms_code: '获取验证码',
            is_bind_email: false,
            is_show_sms_login: false,
            is_show_pwd1: false,
            is_show_pwd2: false,
            is_show_pwd3: false,
            loginName:'',
            loginPsw:'',
            registerName:'',
            registerPsw:'',
            phone:'',
        }
    },
    methods: {
        getSmsCode(){
            if(this.sms_code != '获取验证码'){
                return ;
            }
            this.intervalCodeTime();
        },
        intervalCodeTime(){
            if(this.sms_code == '获取验证码'){
                this.sms_code = 60;
                setTimeout(()=>{
                    this.intervalCodeTime();
                }, 1000)
            }else if(this.sms_code > 0){
                this.sms_code --;
                setTimeout(()=>{
                    this.intervalCodeTime();
                }, 1000)
            }else{
                this.sms_code = '获取验证码'
            }
        },
        enterService(){
          window.location.href="http://test-im.sixeco.com/im-vue/service/user_service.html"
        },
        enterSecret(){
          window.location.href="http://test-im.sixeco.com/im-vue/secret/secret.html"
        },
        //按回车键
        enterPress(event){
          var e = event || window.event, ec = e.keyCode || e.which;
          //按回车发送时
          if(e.which==13){
            this.login()
          }
        },
        //登录
        login(){
          let params = {
              client_id:'v-client',
              client_secret:'v-client-ppp',
              grant_type:'password',
              scope:'select',
              username:this.loginName,
              password:this.loginPsw
          }
          //登录
          login(params)
          .then(res => {
              // localStorage.setItem('token',JSON.stringify(res.data.data))
              this.$store.commit('getToken',res.data.data.access_token)
              let params1 = {
                  userId:res.data.data.user_id,
                  token:res.data.data.access_token
              }
              //登录im，获取wsUrl
              loginIm(params1)
              .then(response => {
                wsUrl = response.data.data.wsUrl
                socketLink()
                // this.$store.commit('setWsUrl',response.data.data.wsUrl)
              })
              
              getInfo({id:res.data.data.user_id})
              .then(response => {
                  this.$store.commit('setUserInfo',response.data.data)
                  this.nickName = this.$store.state.user.userName
                  this.signText = this.$store.state.user.remarks
                  console.log(this.$store.state.user)
                  this.$emit('changeState',2)
              })
          })
        },
        //注册
        registerBtn(){
          let params = {
            name:this.registerName,
            password:this.registerPsw,
            phone:this.phone
          }
          register(params)
          .then(res => {
            this.login_type = 0
            Message({
              message: '注册成功',
              type: 'success'
            })
          })
        }
    },
}
</script>

<style scoped>
    .login_view{
        width: 100%;
        height: 100%;
        padding: 1px;
        background: url('../../assets/icons/bg.png') center;
        background-size:cover;
        flex-direction: column;
        font-size: 14px;
        letter-spacing: 1px;
    }
    .login_box{
        /* flex: 1; */
        width: 67vw;
        min-width: 970px;
        min-height: 600px;
        /* max-height: 790px; */
        margin: 40px;
        display: flex;
        background: url('../../assets/icons/bg2.png') center no-repeat;
        background-size: 100% 100%;
        /* background-size:cover; */
        /* border-radius: 8px; */
        overflow: hidden;
        color: #999;
        height: 85vh;
    }
    .login_box_left{
        width: 574px;
        background: url('../../assets/icons/bg3.png') 40px 40px no-repeat;
        background-size: 160px 160px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 0vh;
    }
    .login_box_right{
        flex: 1;
    }

    .form_box{
        flex: 1;
        width: 360px;
        flex-direction: column;
        justify-content: flex-start;
    }
    .form_tab_box{
        width: 70%;
        display: flex;
        font-size: 20px;
    }
    .form_tab{
        flex: 1;
        position: relative;
        height: 46px;
        cursor: pointer;
    }
    .form_tab.active{
        color: #3b8aff;
    }
    .form_tab.active::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 50px;
        height: 2px;
        background: #3b8aff;
    }

    .form_audio_box{
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-right: 40px;
    }
    .form_audio{
        line-height: 30px;
        width: 90px;
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .form_audio.active{
        color: #3b8aff;
    }
    .audio_check_icon{
        width: 24px;
        height: 24px;
    }

    .form_input_box{
        height: 42px;
        border-radius: 42px;
        background: #e1efff;
        padding: 0 17px;
        position: relative;
        display: flex;
        align-items: center;
        width: 250px;
        margin-top: 10px;
    }
    .form_input_box i{
        font-size: 20px;
    }
    .form_input_box input{
        flex: 1;
        margin-left: 6px;
    }
    .form_input_right_icon{
        width: 24px;
        cursor: pointer;
    }

    .form_row{
        width: 250px;
        display: flex;
        align-items: center;
        height: 40px;
    }
    .forget_btn{
        width: 60px;
        font-size: 12px;
        color: #999;
    }

    .form_main_btn{
        width: 250px;
        height: 42px;
        background: linear-gradient(134deg,#44baf8,#3596fc);
        box-shadow: 0 2px 6px #8dbff8;
        color: #fff;
        border-radius: 25px;
        cursor: pointer;
    }

    .code_login_btn{
        color: #3b8aff;
        margin-top: 20px;
        cursor: pointer;
    }
    .code_login_btn:hover{
        text-decoration: underline;
    }

    .other_login_title{
        display: flex;
        width: 260px;
        color: #bbb;
        align-items: center;
        margin-top: 40px;
    }
    .other_login_line{
        flex: 1;
        height: 1px;
        background: #eee;
        margin: 0 4px;
    }
    .other_login_box{
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
    }
    .other_login_icon{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
    }
    .other_login_icon img{
        width: 48px;
        height: 48px;
    }
    .other_login_icon:hover{
        background: rgba(68,186,248,.2);
    }

    .agreements{
        margin-top: 30px;
        color: #999;
        letter-spacing: 0;
    }
    .agreements span{
        color: #3b8aff;
        cursor: pointer;
    }

    .bind_email_btn{
        width: 230px;
        color: #3b8aff;
        font-size: 12px;
        margin: 10px 0;
    }

    .banner_box{
        height: 500px;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
    }
    .banner{
        width: 100%;
        height: 400px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .flex_center {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .absolute_center{
        position: absolute;
        top:0;left:0;bottom:0;right:0;
        margin: auto;
    }
    .pointer{
        cursor: pointer;
    }
    .clickable{
        cursor: pointer;
        opacity: 0.8;
        user-select: none;
    }
    .clickable:active{
        opacity: 1;
    }
    .border_radius{
        border-radius: 12px;
    }
    .font10px{
        transform: scale(0.8333);
    }

    /* reset 滚动条 */
    ::-webkit-scrollbar  
    {  
      width: 0;
      height: 10px;
      background-color: transparent;
    }  
    ::-webkit-scrollbar-track  
    {  
        background-color: transparent;
    }  
    ::-webkit-scrollbar-thumb
    {  
        border-radius: 10px;  
        /* box-shadow: inset 0 0 6px rgba(0,0,0,.3);   */
        background-color: rgba(144,147,153,.3);
    }

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #bbb; 
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #bbb;
    }
    input:-ms-input-placeholder{
        color: #bbb;
    }
    input::-webkit-input-placeholder{
        color: #bbb;
    }


    .el-checkbox__label{
        color: #3b8aff !important;
    }
    
    .banner1{
      background: url('../../assets/icons/banner1.png');
    }
    .banner2{
      background: url('../../assets/icons/banner2.png');
    }
    .banner3{
      background: url('../../assets/icons/banner3.png');
    }
    .banner4{
      background: url('../../assets/icons/banner4.png');
    }
    .banner5{
      background: url('../../assets/icons/banner5.png');
    }
</style>